<template>
  <Cascader :data="data" v-model="value1"></Cascader>
</template>
<script>
let arr = [
  {
    value: "beijing",
    title: "北京",
    children: [
      {
        value: "gugong",
        title: "故宫",
      },
      {
        value: "tiantan",
        title: "天坛",
      },
      {
        value: "wangfujing",
        title: "王府井",
      },
    ],
  },
  {
    value: "jiangsu",
    title: "江苏",
    children: [
      {
        value: "nanjing",
        title: "南京",
        children: [
          {
            value: "fuzimiao",
            title: "夫子庙",
          },
        ],
      },
      {
        value: "suzhou",
        title: "苏州",
        children: [
          {
            value: "zhuozhengyuan",
            title: "拙政园",
          },
          {
            value: "shizilin",
            title: "狮子林",
          },
        ],
      },
    ],
  },
];
export default {
  name: "child",
  data() {
    return {
      value1: [],
      data: [],
    };
  },
  methods: {
    changeKey(arr) {
      arr.forEach((v, i) => {
        v.label = v.title;
        delete v.title;
        if (v.children) {
          this.changeKey(v.children);
        }
      });
    },
  },
  mounted() {
    this.changeKey(arr);
    this.data = arr;
  },
};
</script>